<template>
	<div class="mysqlDeploy">

		<div class=" deployTitle">
			<!-- <p>部署</p> -->
		</div>
		<div class=" deployBox" style="margin: 20px 0;">
			<el-steps :active="active" finish-status="success" style="padding-left: 50px;">
				<el-step title="活动信息"></el-step>
				<el-step title="添加活动商品"></el-step>
				<el-step title="创建成功"></el-step>
			</el-steps>
			<div class="basicInfo" v-if="active === 0">
				<div class="basic">
					<p class="rule"><span></span>基本信息</p>
					<div class="basic-content">
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
							<el-form-item label="活动名称" prop="name">
								<el-input v-model="ruleForm.name" style="width: 220px;" placeholder="30个字以内"></el-input>
							</el-form-item>
							<el-form-item label="活动时间" required>
								<el-col :span="8">
									<el-form-item prop="date1">
										<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
									</el-form-item>
								</el-col>
								<el-col class="line" :span="1" style="padding-left: 5px;">-</el-col>
								<el-col :span="8">
									<el-form-item prop="date2">
										<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
									</el-form-item>
								</el-col>
							</el-form-item>
							<el-form-item label="广告语" prop="region">
								<el-input v-model="ruleForm.region" placeholder="12个字以内" style="width: 220px;"></el-input>
							</el-form-item>
							<el-form-item label="活动类型" prop="desc">
								<el-input v-model="ruleForm.desc" style="width: 220px;" placeholder="30个字以内"></el-input>
							</el-form-item>

						</el-form>
					</div>
				</div>

				<div class="basic">
					<p class="rule"><span></span>规则设置</p>
					<div class="rule-content">
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
							<el-form-item label="活动预告时间" label-width="100px">
								<el-time-select v-model="value" :picker-options="{
												  start: '08:30',
												  step: '00:15',
												  end: '18:30'
												}"
								 placeholder="选择开始时间">
								</el-time-select>
							</el-form-item>
							<el-form-item label="活动对象" label-width="100px" prop="type">
								<el-radio v-model="radio1" label="1">不限</el-radio>
								<el-radio v-model="radio1" label="2">限新用户</el-radio>
							</el-form-item>
							<el-form-item label="购买限定" label-width="100px" prop="buy">
								<el-radio v-model="radio2" label="1">不限</el-radio>
								<el-radio v-model="radio2" label="2">每人活动期限量</el-radio>
								<el-radio v-model="radio2" label="3">每人每天限量</el-radio>
							</el-form-item>
							<el-form-item label="门店限定" label-width="100px" prop="shop">
								<el-radio v-model="radio3" label="1">不限</el-radio>
								<el-radio v-model="radio3" label="2">指定门店</el-radio>
								<el-button type="primary">选择门店</el-button>
							</el-form-item>
							<el-form-item label="配送方式" label-width="100px" prop="send">
								<el-radio v-model="radio4" label="1">不限</el-radio>
								<el-radio v-model="radio4" label="2">仅自提</el-radio>
								<el-radio v-model="radio4" label="3">仅配送</el-radio>
							</el-form-item>
							<el-form-item label="提货时间" label-width="100px" prop="date3">
								<el-form-item prop="date1">
									<el-date-picker type="date" v-model="ruleForm.date3"></el-date-picker>
								</el-form-item>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>

			<div class="basicConfig" v-if=" active === 1" style="margin: 10px 0  10px 0px;background-color: #fff;">
				<h3 style="padding: 30px 0;"><span style="display: inline-block;
				width: 4px;
				height: 17px;
				margin:5px 8px;
				vertical-align: middle;
				background-color: #1989FA;"></span>添加活动商品</h3>
				
				<el-form :inline="true" :model="search" class="demo-form-inline">
					<el-form-item label="商品编码">
						<el-input v-model="search.ProductCode" placeholder="商品编码"></el-input>
					</el-form-item>
					<el-form-item label="SKU码">
						<el-input v-model="search.Sku" placeholder="SKU码"></el-input>
					</el-form-item>
					<el-form-item label="商品名称">
						<el-input v-model="search.ProductName" placeholder="商品名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary">搜索</el-button>
						<el-button type="primary" @click="resetForm('search')">重置</el-button>
					</el-form-item>
					<br>
					<el-button type="primary" icon="el-icon-plus" @click="dialogTitle='添加活动商品';dialogVisible=true">添加活动商品</el-button>
					<el-button type="danger" @click="batchDelete(tableChecked)"  icon="el-icon-delete">删除所选</el-button>
				</el-form>

				<el-table ref="multipleTable" :data="ftableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column label="商品编码" prop="ProductCode" width="100">
					</el-table-column>
					<el-table-column prop="Sku" label="SKU码" width="100">
					</el-table-column>
					<el-table-column width="100" label="商品图片">
						<template slot-scope="scope"><img :src="scope.row.PictureUrl" alt=""></template>
					</el-table-column>
					<el-table-column prop="ProductName" label="商品名称" width="100">
					</el-table-column>
					<el-table-column prop="price" label="正常价(元)" width="100">
					</el-table-column>
					<el-table-column label="促销价(元)" width="100">
						<template slot-scope="scope">
							<el-input v-model="scope.row.PromotionPrice"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="佣金比例%" width="100">
						<template slot-scope="scope">
							<el-input v-model="scope.row.FeeRate" style="width: 60px;"></el-input><span style="margin-left: 3px;">%</span>

						</template>
					</el-table-column>
					<el-table-column label="限购量(件)" prop="LimitCount">

					</el-table-column>
					<el-table-column label="活动总库存(件)" width="120" prop="PromotionStock">
						<!-- <el-input></el-input> -->
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="text" icon="el-icon-delete" style="color: red;" @click="handleDelete(scope.$index, scope.row)">停用</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage"
				 :page-sizes="pagesizes" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
				</el-pagination>
				<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" :before-close="handleClos">
					<el-form label-width="110px" :model="tempRow">
						<el-form-item label="商品编码">
							<el-input v-model="tempRow.ProductCode"></el-input>
						</el-form-item>
						<el-form-item label="商品名称">
							<el-input v-model="tempRow.ProductName"></el-input>
						</el-form-item>
						<el-form-item label="正常价(元)">
							<el-input v-model="tempRow.price"></el-input>
						</el-form-item>
						<el-form-item label="促销价(元)">
							<el-input v-model="tempRow.PromotionPrice"></el-input>
						</el-form-item>
						<el-form-item label="佣金比例">
							<el-input v-model="tempRow.FeeRate"></el-input>
						</el-form-item>
						<el-form-item label="限购量(件)">
							<el-input v-model="tempRow.LimitCount"></el-input>
						</el-form-item>
						<el-form-item label="活动总库存(件)">
							<el-input v-model="tempRow.PromotionStock"></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="addTable()" v-if="dialogTitle=='添加活动商品'" icon="el-icon-check">提交</el-button>

					</span>

				</el-dialog>
			</div>
			<div class="basicParameter" v-if="active === 2">
				<div class="bg">
					<div class="btn">
						<p style="margin: 20px 50px;color: #1989FA;">活动创建成功！</p>
						<router-link to="./user" style="margin-right: 30px;border:2px solid #1989FA "><el-button>活动列表</el-button></router-link>
						<router-link to="./user"><el-button type="primary">活动详情</el-button></router-link>
					</div>
					
				</div>
			</div>
			<div class="deployBtn">
				<el-button style="margin-top: 12px;" @click="prev" v-if="active==1">上一步活动信息</el-button>
				<el-button style="margin-top: 12px;" @click=" next" v-if="active==0" type="primary">下一步,添加活动商品</el-button>
				<el-button style="margin-top: 12px;" @click=" next" v-if="active==1" type="primary">
					完成
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { Dialog } from 'vant';
	
	export default {
		components:{
			[Dialog.name]:Dialog,
		},
		data() {
			return {
				tableChecked:[],//被选中的记录数据-----对应“批量删除”传的参数值
				ids:[],//批量删除id
				active: 0,
				value: '',
				radio1: '1',
				radio2: '1',
				radio3: '1',
				radio4: '1',
				labelPosition: 'right',
				ruleForm: {
				  name: '',
				  region: '',
				  date1: '',
				  date2: '',
				  delivery: false,
				  type: [],
				  resource: '',
				  desc:'',
				},
				rules: {
				  name: [
					{ required: true, message: '请输入活动名称', trigger: 'blur' },
					{ min: 3, max: 30, message: '长度在30字以内', trigger: 'blur' }
				  ],
				  region: [
					{ required: true, message: '请选择广告语', trigger: 'change' }
				  ],
				  date1: [
					{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
				  ],
				  date2: [
					{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
				  ],
				  date3: [
						{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
				  ],
				  type: [
					{ type: 'array', required: true, message: '请选择活动对象', trigger: 'change' }
				  ],
				  buy: [
						{ type: 'array', required: true, message: '请选择购买限定', trigger: 'change' }
				  ],
				  shop: [
						{ type: 'array', required: true, message: '请选择门店限定', trigger: 'change' }
				  ],
				  send: [
						{ type: 'array', required: true, message: '请选择配送方式', trigger: 'change' }
				  ],
				  desc: [
					{ required: true, message: '请填写活动类型', trigger: 'blur' }
				  ]
				},
				flag: true,
				orderList: [],
				pagination: {},
				dialogTitle: "",
				dialogVisible: false,
				// 正在编辑中的行
				tempRow: {},
				// 正在编辑的是第几行
				tempindex: null,
				search: {
					ProductCode: '',
					Sku: '',
					ProductName: ''
				}
		};
	},
	created() {
			this.getDate();
			this.getPagin();
		},
		computed: {
			pagesizes:function(){
				var pages = Math.ceil(this.pagination.total/this.pagination.pageSize);
				var temp = [];
				for(var i=1;i<=pages;i++){
					temp.push(i*this.pagination.pageSize);
				}
				console.log(temp,"temp")
				return temp;
			},
			ftableData: function() {
				// var that=this;
				var temp = this.orderList.filter(row => {
					var flag = true;

					for (var k in this.search) {
						//搜索条件遍历
						console.log(row[k])
						if (this.search[k] != "" && !String(row[k]).includes(this.search[k])) {
							flag = false;
						}
					}
					return flag;
				})
				return temp;
			}
		},
		methods: {
			prev() {
				--this.active;
				if (this.active < 0) this.active = 0
			},
			next() {
				if (this.active++ > 2) this.active = 0;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			getPagin() {
				// 根据参数不一样去回来的数据不一样
				this.$http.get("/web/orders/?page=1&OrderStatus=all&")
					.then(res => {
						this.pagination = res.data.pagination;
					})
					.catch(err => {
						console.log(err)
					})
			},
			getDate() {
				this.$http.get("api/v1/data")
					.then(res => {
						this.orderList = res.data.list
						console.log(res.data)
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 添加数据到表格
			addTable() {
				// 把数据插入到前面
				this.orderList.unshift({ ...this.tempRow
				});
				// 清空编辑的行
				this.tempRow = {
					Consignee: "",
					Deliverytime: "",
				};
				// 关闭对话框
				this.dialogVisible = false;
			},
			resetForm() {
				this.search =
				{
					ProductCode: '',
					Sku: '',
					ProductName: ''
				}
			},
			handleClos(){
				this.dialogVisible = false;
			},
			handleDelete(index, row) {
				console.log(index, row,);
				//查找index
				var ind = this.ftableData.findIndex(item => item === row)
				//删除功能
				Dialog.confirm({
				  title: '删除',
				  message: '确定要删除吗',
				})
				  .then(() => {
				    // on confirm
					this.ftableData.splice(ind, 1);
				  })
				  .catch(() => {
				   
				  });
				
			},
			handleSelectionChange(val) {
				console.log("handleSelectionChange--",val)
				this.tableChecked = val
				
			},
			batchDelete(rows){
				console.log(rows,"==========")
				
				// var ind = this.tableChecked.findIndex(item => item === rows)
				// //删除功能
				
				Dialog.confirm({
				  title: '删除',
				  message: `确定要删除${this.tableChecked.length}个吗`,
				})
				  .then(() => {
				  if(this.tableChecked.length===rows.length){
				  	this.orderList.splice(0, this.tableChecked.length);
				  	this.tableChecked.splice(0, this.tableChecked.length);
				  }
				  })
				  .catch(() => {
				   
				  });
				
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			onSubmit() {
				console.log('submit!');
			},

			prev() {
				--this.active;
				if (this.active < 0) this.active = 0
			},
			next() {
				if (this.active++ > 2) this.active = 0;
			}
		}
	}
</script>

<style scoped="scoped">
	.bg{
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		width: 100%;
		background:white url(../../assets/icon.png) no-repeat center center;
		overflow: hidden;
		}
	/* .btn{
		width: 250px;
		height: 50px;
		margin-top: 300px;
	} */
	.basicInfo {
		background-color: white;
		padding-top:10px;
		/* margin-top: 60px; */
	}

	.basicInfo .basic {
		display: flex;
		width: 860px;
		margin: 0 auto;
		margin-bottom: 10px;
		margin-top: 20px;
	}

	.basicInfo .basic span {
		display: inline-block;
		width: 4px;
		height: 15px;
		margin-right: 10px;
		vertical-align: middle;
		background-color: #1989FA;
	}

	.basicInfo .basic .rule-content {
		width: 600px;
		height: 400px;
		display: flex;
		justify-content: center;

	}

	.basicInfo .basic .basic-content {
		width: 720px;
		height: 280px;
		display: flex;
		justify-content: center;

	}

	.deployBtn {
		display: flex;
		justify-content: flex-end;
		padding-right: 300px;
		padding-bottom: 80px;

	}
</style>
